<template>
    <div class="my_input">
            <div class="my_input_up">
                <img :src="require(`${icons}`)" alt="">
                <span v-if="tel!=''?true:false">{{tel}}</span>
                <input 
                :value="values" 
                required  
                :type="type"
                @input="$emit('update:values', $event.target.value)"
                 />
                <van-icon name="cross" size="20px"  color="#999999" v-if="showX" @click="$emit('update:values', '')" />
                <div class="eyes" v-if="types=='password'&& values!=''?true:false" @click="change_eyes">
                    <img :src="eyes?require('../../assets/imgs/input_eyes.png'):require('../../assets/imgs/input_close.png')" alt="">
                </div>
                <label :class="tel?'my_input_label':'my_input_label_notel'">{{labels}}</label>
                <div class="border"></div>
                <div class="border_active"></div>
            </div>
    </div>
</template>

<script>
//autocomplete = 'new-password'
import { ref, toRefs, watch } from "vue"
export default {
    props:{
        label:String,
        values:String,
        tel:String,
        types:String,
        autofocus:String,
        icons:String
    },
    setup(props,ctx){
        const {values} = toRefs(props)
        const labels = ref(props.label)
        const type = ref(props.types || 'text')
        const showX = ref(false)
        const tel = ref(props.tel || "")
        const eyes = ref(false)
        const autofocus = ref(props.autofocus || '')
        watch(values,(cur,pre)=>{

            if(cur != "" ){
                showX.value = true
            }else{
              (showX.value = false)
            }
        })

        const change_eyes = () => {
            eyes.value = !eyes.value
            if(eyes.value == true){
                type.value = "text"
            }else{
                type.value = "password"
            }
        }

        return{
            labels,
            tel,
            showX,
            type,
            eyes,
            autofocus,
            change_eyes
        }
    }
}
</script>

<style lang="scss" scoped>
    .my_input{
        width: 100%;
        font-size: 32px;
        color: #000000;
        .my_input_up{
            display: flex;
            align-items: center;
            padding: 0px 10px;
            position: relative;
            .eyes{
                height: 50px;
                margin-left: 30px;
                img{
                    height: 50px;
                    width: 50px;
                }
            }
            .my_input_label{
                position: absolute;
                left: 100px;
                color: rgba($color: #3a3a3a, $alpha: 0.5);
                pointer-events: none;
                transition: all 0.3s ease;
            }
            .my_input_label_notel{
                position: absolute;
                left: 20px;
                color: rgba($color: #3a3a3a, $alpha: 0.5);
                pointer-events: none;
                transition: all 0.3s ease;
            }
            span{
                display: inline-block;
                margin-right: 20px;
                margin-left: 20px;
            }
            
            input{
                width: 100%;
                border:none;
                caret-color:#3C39D6;
                filter: none !important;  
                &:-webkit-autofill {
                    -webkit-box-shadow: 0 0 0px 100px white inset;
                    box-shadow: 0 0 0px 100px white inset;   
                                  
                }
                // 自动填充文本样式
                &:-webkit-autofill::first-line {
                    font-size: 34px;
                    font-weight: bold;
                }
                &:focus ~ .my_input_label,
                &:valid ~ .my_input_label{
                    transform: translate(-80px, -50px);
                    color: #000;
                    font-size: 28px;
                }
                &:focus ~ .my_input_label_notel,
                &:valid ~ .my_input_label_notel{
                    transform: translate(0, -50px);
                    color: #000;
                    font-size: 28px;
                }
                &:focus ~ .border_active,
                &:valid ~ .border_active{
                    transform: scaleX(1);
                }
                &::placeholder{
                    color: #999999;
                }
            }
            .border{
                height: 1px;
                width: 630px;
                background: rgba(221, 221, 221, 0.5);
                border-radius: 9px; 
                position: absolute;       
                bottom: -20px;    
            }
            .border_active{
                height: 4px;
                width: 630px;
                background: #3C39D6;
                border-radius: 9px;
                transform: scaleX(0);
                transition: all 0.3s ease;    
                position: absolute;   
                bottom: -20px;          
            }
        }

    }
</style>